<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人问题记录文档</title>
  </head>
  <body>
    <div>
      <p id="pnode">
        这是一段文本内容，这是
        <span style="color: red">美国</span>一段文本内容。
        一段文本内容。一段文本内容。<span class="wbjc" style="color: red"
          >日本</span
        >一段文本内容。一段<span style="color: red">韩国</span>文本内容。
      </p>
    </div>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">点击获取光标</button>
    <script>
      const newRange = document.createRange();
      const pnode = document.getElementById("pnode");
      const wbjc = document.getElementsByClassName("wbjc");
      let wbjcArr = wbjc.childNodes;
      console.log(wbjc[0].childNodes[0]);
      console.log(pnode.childNodes);
      newRange.setStart(wbjc[0].childNodes[0], 0);
      newRange.setEnd(wbjc[0].childNodes[0], 2);
      window.getSelection().addRange(newRange);
      let str = "这是一段文本内容，这是一段文本内容。一段文本内容";
      str = str.replace(/一段/g, function (a, b, c) {
        console.log(a);
        console.log(b);
        console.log(c);
      });
      //1.实时更新下标开始值和结束值
      //2.给纠错的词加class标签，和智能纠错对应第几个就标签就选中第几个标签。
      //3.点击纠正后，
      let txt = document.getElementById("txt");
      let btn = document.getElementById("btn");
      btn.onclick = function () {
        console.log(txt.selectionStart);
      };
    </script>
  </body>
</html>
